<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <ui:composition template="./template.xhtml">
        <ui:define name="content">
            <p:growl autoUpdate="true"/>
            <p:panel header="Create event" styleClass="middlePanel">
                <h:form>
                    <div style="padding: 20px; margin-left: auto; margin-right: auto;">
                        <p:link outcome="home.xhtml?faces-redirect=true" 
                                value="Back" style="padding-right: 15px"/>
                        <p:commandButton value="Create!"
                                     action="#{eventBean.registerEvent()}"
                                     update="createGrid"/>
                    </div>
                    
                    <h:panelGrid id="createGrid" columns="2" cellpadding="10" styleClass="inMiddlePanel">

                        <h:outputLabel for="name" value="Name: "/>
                        <p:inputText id="name" value="#{eventBean.event.name}"
                                     label="Name" maxlength="45"/>
                        
                        <h:outputLabel for="isPublic" value="Privacy: "/>
                        <p:selectOneRadio id="isPublic" value="#{eventBean.event.isPublic}">
                            <f:selectItem itemLabel="Public" itemValue="TRUE"/>
                            <f:selectItem itemLabel="Private" itemValue="FALSE"/>
                        </p:selectOneRadio>

                        <h:outputLabel for="startDate" value="Start date: "/>
                        <p:calendar id="startDate" value="#{eventBean.event.startDate}" 
                                    mindate="#{eventBean.currentDate}">
                            <p:ajax event="dateSelect" update="endDate"/>
                        </p:calendar>

                        <h:outputLabel for="startTime" value="Start time: "/>
                        <p:calendar id="startTime" value="#{eventBean.event.startTime}" 
                                    pattern="HH:mm a" timeOnly="true"  />                           

                        <h:outputLabel for="endDate" value="End date: "/>
                        <p:calendar id="endDate" value="#{eventBean.event.endDate}" 
                                    mindate="#{eventBean.event.startDate}"/>

                        <h:outputLabel for="endTime" value="End time: "/>
                        <p:calendar id="endTime" value="#{eventBean.event.endTime}" 
                                    pattern="HH:mm a" timeOnly="true"  />

                        <h:outputLabel for="place" value="Where: "/>
                        <p:inputText id="place" value="#{eventBean.event.place}"
                                     label="Place" maxlength="45"/>

                        <h:outputLabel for="outdoor" value="Location: "/>
                        <p:selectOneRadio id="outdoor" value="#{eventBean.event.outdoor}">
                            <f:selectItem itemLabel="Outdoor" itemValue="TRUE"/>
                            <f:selectItem itemLabel="Indoor" itemValue="FALSE"/>
                        </p:selectOneRadio>

                        <h:outputText value="Description: "/>
                        <p:inputTextarea id="description" value="#{eventBean.event.description}"
                                         maxlength="140" rows="5" 
                                         autoResize="false"
                                         styleClass="description"/>

                    </h:panelGrid>

                    <p:watermark for="place" value="Enter a place" id="watermarkPlace" />
                    <p:watermark for="description" value="Enter a description" id="watermarkDescription" />
                </h:form>
                
                <h:form>
                    <p:commandButton id="addInvited" styleClass="addInvitationHidden" update="invitationList"
                                         action="#{eventBean.addInvitedUser()}"/>
                    <p:dataList id="invitationList"  value="#{eventBean.invitedPeople}" 
                                var="invited" emptyMessage="You haven't invited anyone yet" type="definition">
                        <f:facet name="header">
                            Invitations
                        </f:facet>
                        <div style="padding: 5px; padding-left: 120px; text-align: left">
                            <p:commandButton action="#{eventBean.withdrawInvitation(invited.username)}" 
                                             id="withdraw" update="invitationList" 
                                             icon="ui-icon-closethick" 
                                             title="Withdraw invitation"
                                             immediate="true"/>
                            <h:outputText value="#{invited.username}" style="padding-left: 10px" />
                        </div>
                    </p:dataList>
                    <h:panelGrid columns="3" cellpadding="5" styleClass="inMiddlePanel">
                        <h:outputLabel for="invite" value="Invite people: "/>
                        <p:inputText id="invite" value="#{eventBean.newUserInvited}" 
                                     label="InvitedUser" maxlength="45"
                                     required="true"/>
                        <p:commandButton id="add" value="Invite" update="invitationList"
                                         action="#{eventBean.addInvitedUser()}"/>
                    </h:panelGrid>
                </h:form>
            
            </p:panel>
        </ui:define>
    </ui:composition> 
</html>
